{include "INC_header.html" title="SSO/短信/配置"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="configs.locale" :theme="configs.theme">
        <div class="app-container">
            <main style="overflow: auto;">
                <div class="ui form padding">
                    <div class="ui message info"><i class="fa fa-info-circle"></i> 调试模式打开后，短信将不发送，接口可直接返回验证码！仅支持：<a href="https://cloud.tencent.com/act/cps/redirect?redirect=10068&cps_key=78f61ea82997df98c99879fa41d9a2ab" target="_blank">腾讯云短信</a>！</div>
                    <div class="field">
                        <div class="label">调试模式</div>
                        <div class="">
                            <a-switch v-model:checked="config.debug" checked-children="开" un-checked-children="关" />
                        </div>
                    </div>
                    <div class="field">
                        <div class="label">短信有效时长(秒)</div>
                        <div class="">
                            <a-input-number :min="300" :max="3600" v-model:value="config.lifeTime"></a-input-number>
                        </div>
                    </div>
                    <a-divider orientation="left" orientation-margin="0px">国内短信</a-divider>
                    <div class="field" style="width: 400px;">
                        <div class="label">腾讯云子账号 SecretId</div>
                        <div class="">
                            <a-input v-model:value="config.account" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 400px;">
                        <div class="label">腾讯云子账号 SecretKey</div>
                        <div class="">
                            <a-input v-model:value="config.secret" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">腾讯云短信应用 SDK AppID</div>
                        <div class="">
                            <a-input v-model:value="config.appId" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">短信模板ID</div>
                        <div class="">
                            <a-input v-model:value="config.tempId" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">签名内容</div>
                        <div class="">
                            <a-input v-model:value="config.signName" placeholder="必须与申请的签名一致"></a-input>
                        </div>
                    </div>
                    <a-divider orientation="left" orientation-margin="0px">国际短信（不填写的项，默认使用国内短信配置）</a-divider>
                    <div class="field" style="width: 400px;">
                        <div class="label">腾讯云子账号 SecretId</div>
                        <div class="">
                            <a-input v-model:value="config.international.account" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 400px;">
                        <div class="label">腾讯云子账号 SecretKey</div>
                        <div class="">
                            <a-input v-model:value="config.international.secret" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">腾讯云短信应用 SDK AppID</div>
                        <div class="">
                            <a-input v-model:value="config.international.appId" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">短信模板ID</div>
                        <div class="">
                            <a-input v-model:value="config.international.tempId" placeholder="自行注册查阅"></a-input>
                        </div>
                    </div>
                    <div class="field" style="width: 200px;">
                        <div class="label">签名内容</div>
                        <div class="">
                            <a-input v-model:value="config.international.signName" placeholder="必须与申请的签名一致"></a-input>
                        </div>
                    </div>
                </div>
            </main>
            <footer class="light-background border-top">
                <div class="ui flex-item padding">
                    <div class="center"></div>
                    <div class="end">
                        <a-button type="primary" @click="save()"><i class="fa-regular fa-floppy-disk margin-right-half"></i> 保存设置</a-button>
                    </div>
                </div>
            </footer>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                configs: window.appProviderConfig,
                //数据
                config: {
                    debug: true,
                    lifeTime: 600,
                    account: '',
                    secret: '',
                    appId: '',
                    tempId: 0,
                    signName: '',
                    international: {
                        account: '',
                        secret: '',
                        appId: '',
                        tempId: 0,
                        signName: '',
                    }
                },
                saveLoading: false
            }
        },
        mounted() {
            //挂载成功
            const hide = message.loading("正在加载配置...");
            let self = this;
            axios.get("{url url='/sso/api/admin/sms/config'}").then(({ data }) => {
                hide();
                if (data.error === 0) {
                    self.config = data.data;
                } else {
                    message.error(data.message);
                }
            }).catch(() => {
                hide();
                message.error("服务端繁忙");
            });
        },
        methods: {
            //方法

            save: function () {
                if (this.saveLoading) {
                    return;
                }
                this.saveLoading = true;
                let self = this;
                axios.post("{url url='/sso/api/admin/sms/saveConfig'}", {
                    debug: this.config.debug ? 1 : 0,
                    lifeTime: this.config.lifeTime,
                    //国内
                    account: this.config.account,
                    secret: this.config.secret,
                    appId: this.config.appId,
                    tempId: this.config.tempId,
                    signName: this.config.signName,
                    //国际
                    international_account: this.config.international.account,
                    international_secret: this.config.international.secret,
                    international_appId: this.config.international.appId,
                    international_tempId: this.config.international.tempId,
                    international_signName: this.config.international.signName,

                }).then(({ data }) => {
                    self.saveLoading = false;
                    if (data.error === 0) {
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.saveLoading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent.length > 0) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"短信" },
                { name:"配置" }
            ]
        });
    }
</script>
{include "INC_footer.html"}